<template>
  <div class="admin-login-container">
    <!-- 背景装饰元素 -->
    <div class="background-elements">
      <div class="leaf leaf-1"></div>
      <div class="leaf leaf-2"></div>
      <div class="leaf leaf-3"></div>
      <div class="grain grain-1"></div>
      <div class="grain grain-2"></div>
    </div>
    
    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="logo">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" width="48" height="48">
              <path fill="#4CAF50" d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M14.88,11.53L13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.47,10.12C12.76,8.59 13.26,6.44 14.85,4.85C16.76,2.93 19.5,2.57 20.96,4.03C22.43,5.5 22.07,8.24 20.15,10.15C19.58,10.72 18.87,11.13 18.1,11.37L16.87,10.14C17.44,9.95 18,9.58 18.44,9.13C19.79,7.78 19.79,5.5 18.44,4.15C17.09,2.8 14.81,2.8 13.46,4.15C12.8,4.81 12.46,5.69 12.46,6.56C12.46,7.43 12.8,8.31 13.46,8.97C13.91,9.42 14.43,9.73 14.97,9.87L14.88,11.53Z"/>
            </svg>
          </div>
          <h1>农产品融销一体平台</h1>
          <p>管理员登录系统</p>
        </div>
        <div class="brand-description">
          <h3>连接农田与市场</h3>
          <p>一站式农产品融资与销售解决方案</p>
        </div>
      </div>
      
      <!-- 右侧登录表单 -->
      <div class="login-section">
        <div class="login-header">
          <h2>管理员登录</h2>
          <p>请输入您的账户信息</p>
        </div>
        
        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="username">管理员账号</label>
            <div class="input-wrapper">
              <span class="input-icon">
                <svg viewBox="0 0 24 24" width="20" height="20">
                  <path fill="#7E8C9C" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
                </svg>
              </span>
              <input 
                id="username"
                v-model="loginForm.username" 
                type="text" 
                placeholder="请输入管理员账号"
                required
              >
            </div>
          </div>
          
          <div class="form-group">
            <label for="password">登录密码</label>
            <div class="input-wrapper">
              <span class="input-icon">
                <svg viewBox="0 0 24 24" width="20" height="20">
                  <path fill="#7E8C9C" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
                </svg>
              </span>
              <input 
                id="password"
                v-model="loginForm.password" 
                :type="showPassword ? 'text' : 'password'" 
                placeholder="请输入登录密码"
                required
              >
              <span class="password-toggle" @click="showPassword = !showPassword">
                <svg viewBox="0 0 24 24" width="20" height="20">
                  <path v-if="showPassword" fill="#7E8C9C" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
                  <path v-else fill="#7E8C9C" d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C20.39,18.08 13.84,22.5 12,22.5C10.16,22.5 3.61,18.08 1,12C2.73,7.61 7,4.5 12,4.5M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" />
                </svg>
              </span>
            </div>
          </div>
          
          <div class="form-options">
            <label class="remember-me">
              <input type="checkbox" v-model="loginForm.rememberMe">
              <span class="checkmark"></span>
              记住登录状态
            </label>
            <a href="#" class="forgot-password">忘记密码?</a>
          </div>
          
          <button type="submit" class="login-button" :disabled="loading">
            <span v-if="loading" class="button-loading">
              <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="#FFFFFF" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
              </svg>
              登录中...
            </span>
            <span v-else>登录系统</span>
          </button>
        </form>
        
        <div class="login-footer">
          <p>© 2025 农产品融销一体平台 · 管理员系统</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { adminLoginApi } from '@/api/admin/login'
const router = useRouter()

const loginForm = reactive({
  username: '',
  password: '',
  role: 'ROLE_ADMIN'
})

const showPassword = ref(false)
const loading = ref(false)

// 登录函数
const handleLogin = async () => {
  // 表单验证
  if (!loginForm.username || !loginForm.password) {
    ElMessage.error('请输入用户名和密码')
    return
  }
  
  loading.value = true
  
  try {
    const result = await adminLoginApi(loginForm);
    if(result.code == 200){
      ElMessage.success("登录成功");
      localStorage.setItem('loginUser', JSON.stringify(result.data))
      router.push('/admin/index')
    } else {
      //提示信息
      ElMessage.error(result.message);
    }
  } catch (error) {
    ElMessage.error('登录失败，请检查用户名和密码')
    console.error('Login error:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.admin-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.leaf, .grain {
  position: absolute;
  opacity: 0.1;
}

.leaf {
  width: 120px;
  height: 120px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l-1.89-.64C5.64 15.5 7.68 9 17 8Z"/></svg>') no-repeat;
  background-size: contain;
}

.leaf-1 {
  top: 10%;
  left: 5%;
  transform: rotate(15deg);
}

.leaf-2 {
  bottom: 15%;
  right: 8%;
  transform: rotate(-20deg);
}

.leaf-3 {
  top: 20%;
  right: 10%;
  transform: rotate(45deg);
}

.grain {
  width: 80px;
  height: 80px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M18.92 2.01C18.72 1.42 18.16 1 17.5 1h-11c-.66 0-1.21.42-1.42 1.01L3 8v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1V8l-2.08-5.99zM6.5 12c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm11 0c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 7l1.5-4.5h11L19 7H5z"/></svg>') no-repeat;
  background-size: contain;
}

.grain-1 {
  top: 60%;
  left: 10%;
}

.grain-2 {
  top: 15%;
  right: 20%;
}

.login-card {
  display: flex;
  width: 900px;
  max-width: 90%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1;
}

.brand-section {
  flex: 1;
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  color: white;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo {
  text-align: center;
}

.logo-icon {
  margin-bottom: 20px;
}

.logo h1 {
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: 600;
}

.logo p {
  opacity: 0.8;
  font-size: 14px;
}

.brand-description h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

.brand-description p {
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.5;
}

.login-section {
  flex: 1.2;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
}

.login-header {
  margin-bottom: 40px;
  text-align: center;
}

.login-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}

.login-header p {
  color: #7E8C9C;
  font-size: 14px;
}

.login-form {
  flex: 1;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-size: 14px;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 15px;
  z-index: 1;
}

.input-wrapper input {
  width: 100%;
  padding: 14px 14px 14px 45px;
  border: 1px solid #E1E5EB;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s;
  background: #F9FAFC;
}

.input-wrapper input:focus {
  outline: none;
  border-color: #4CAF50;
  background: white;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.password-toggle {
  position: absolute;
  right: 15px;
  cursor: pointer;
  color: #7E8C9C;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  font-size: 14px;
}

.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #555;
}

.remember-me input {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 1px solid #E1E5EB;
  border-radius: 4px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.remember-me input:checked + .checkmark {
  background: #4CAF50;
  border-color: #4CAF50;
}

.remember-me input:checked + .checkmark:after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.forgot-password {
  color: #4CAF50;
  text-decoration: none;
  transition: color 0.2s;
}

.forgot-password:hover {
  color: #388E3C;
  text-decoration: underline;
}

.login-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.button-loading {
  display: flex;
  align-items: center;
}

.button-loading svg {
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.login-footer {
  margin-top: 30px;
  text-align: center;
  color: #7E8C9C;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-card {
    flex-direction: column;
    max-width: 100%;
  }
  
  .brand-section {
    padding: 30px 20px;
  }
  
  .login-section {
    padding: 30px 20px;
  }
}
</style>